<template>
  <canvas ref="containerRef" id="container">
<!--    <canvas style="width: 100%;height: 100%"  canvas-id="canvas"></canvas>-->
<!--    <image ref="imgUrlRef" :src="imageUrl"></image>-->
  </canvas>
</template>

<script setup lang="ts">
import Konva from 'konva';
import {onMounted, ref} from "vue";

const width = 850;
const height = 850;
// const stage = ref()
const containerRef = ref()
const imgUrlRef = ref()
const scale = ref(1)
const porps = defineProps({
  imageUrl: String
})
onMounted(() => {
  // containerRef.value.onmousewheel = (event=>{
  //   let dir = event.deltaY > 0 ? "up" : "down"
  //   if(dir == "up"){
  //     zoomIn()
  //   }else{
  //     zoomOut()
  //   }
  // })
  imageDraw();
  console.log(imgUrlRef.value,'imgUrlRef')
})
const zoomIn = () => {
  containerRef.value.style.transform = "scale(" + scale.value + ")"
  scale.value += 0.05
}
const zoomOut = () => {
  containerRef.value.style.transform = "scale(" + scale.value + ")"
  scale.value -= 0.05
}
const imageDraw = () => {
  var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height
  });
  console.log(stage, 'stage')

  var layer = new Konva.Layer();
  // darth vader
  console.log(Konva, 'Konva')
  var darthVaderImg = new Konva.Image({
    image: imageObj,
    x:50,
    y:70,
    width: 700,
    height: 700,
    draggable: true
  });
  // var circle = new Konva.Circle({
  //   x: stage.width() / 2,
  //   y: stage.height() / 2 + 10,
  //   radius: 70,
  //   fill: 'red',
  //   stroke: 'black',
  //   strokeWidth: 4,
  //   draggable: true
  // });

  // layer.add(circle);
  layer.add(darthVaderImg);
  stage.add(layer);
  const tr = new Konva.Transformer({
    anchorFill: '#999',
    anchorSize: 30
  })
  layer.add(tr)
  tr.nodes([darthVaderImg])
  // tr.nodes([circle])
}
// const image = uni.getImageInfo({
//   src: porps.imageUrl,
//   success(res) {
//     var ctx = uni.createCanvasContext("canvas") // 使用画布创建上下文 图片
//     ctx.drawImage(res.path, 10, 20, 450, 450)// 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
//     ctx.save();//保存
//     ctx.draw()//绘制
//   }
// })
// console.log()
const imageObj = new Image();
imageObj.onload = function () {
  imageDraw();
};
imageObj.src = porps.imageUrl;
console.log(imageObj,'imageObj')

</script>

<style scoped>
#container {
  background-color: transparent;
  width: 100%;
  height: 100%;
}
</style>
